<template>
	<view class="bods">
		<view class="serch">
			<view style="width: 80%;margin-left: 30rpx;">
				<u-search :showAction='false' placeholder="出差事由、时段" v-model="keyvalue" :clearabled="true"></u-search>
			</view>
			<view class="textblue">
				<p>时间</p>
				<image style="width: 25rpx;" src="@/static/newimg/paixu.png" mode="widthFix"></image>
			</view>
		</view>
		<!-- 列表 -->
		<view class="rowf" v-for="(item, index) in filelist" :key="index">
			<view class="rowf_l">
				<image src="../../static/oa/danju.png" mode="widthFix" style="width: 80rpx;vertical-align: bottom;"></image>
				<p class='rowf_txt'><b>{{ item.order }}</b></p>
			</view>
			<view class="config">
				<view class="Hawork">
					<view class="Hawork_god">
						<span class='sright'>日期</span>
						<p>{{ item.date }}</p>
					</view>
					<view class="Hawork_god">
						<span class='sright'>类型</span>
						<p> {{ item.address }}</p>
					</view>
					<view class="Hawork_god">
						<span class='sright'>事由</span>
						<p>{{ item.idear }}</p>
					</view>


				</view>

			</view>
			<u-line></u-line>
			<view @click="toInfor(index)" class="unik">
				<p class='texttwo'>报销发起</p>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyvalue: '',
				list: [{
					 order: 'CQS20120900027',
						date: '2021/01/22-2021/01/23',
						address: '国内',
						idear: '出差申请事由申请事由申请事由'
					},
					{
						order: 'CCS20120900027',
						date: '2021/01/22-2021/01/23',
						address: '国内',
						idear: '请假申请事由申请事由申请事由'
					},
					{
						order: 'CSS20120900027',
						date: '2021/01/22-2021/01/23',
						address: '国内',
						idear: '出国申请事由申请事由申请事由'
					},
				],
				filelist: [],
			}
		},
		created() {
			console.log(1)
			// Object.toAjaxJson('/bpmway/reim/mp/dbsap/busiTripmEntity', "/queryBusiTripList", {
			// 	instanceType: 'All'
			// }, true, null, function(res) {
			// 	if (res.code == 404) {
			// 		console.log(404)
			// 	}
			// 	that.countData = res.data;
			// 	that.minelist[0].num = that.countData.todoCount + '' // todayTodoCount 今日代办
			// 	that.minelist[1].num = that.countData.myStartCount + '' // 发起 myStartCount
			// 	that.minelist[2].num = that.countData.circulatedDoneCount + '' //审阅
			// 	that.minelist[3].num = that.countData.myDraftCount + '' // myDraftCount 保存
			// });
		},
		methods: {
			toInfor(v) {
				this.$jump('./Information', 'navigate');
				console.log(v)
			},
			changtimer() {
				let that = this
				// console.log(that.timersort)
				if (that.timersort == true) {
					that.filelist = that.list.sort(function(a, b) {
						let fristdate = new Date(a.date).getTime()
						let lastdate = new Date(b.date).getTime()
						that.timersort = false
						return lastdate - fristdate
					})
				} else {
					this.filelist.reverse();
				}
			}
		},
		watch: {
			keyvalue: {
				immediate: true,
				handler(newName, OldName) {
					this.filelist = this.list.filter((v) => {
						if (v.order.indexOf(newName) !== -1) {
							return v.order.indexOf(newName) !== -1
						} else if (v.date.indexOf(newName) !== -1) {
							return v.date.indexOf(newName) !== -1
						}
					})
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	view{
		font-family: pf;
	}
	.bods {
		width: 100%;
		background-color: rgb(248, 249, 251);
		height: 750px;

	}

	.textblue {
		width: 150rpx;
		height: 70rpx;
		background-color: red;
		text-align: center;
		font-size: 30rpx;
		border-radius: 50px;
		background-color: rgb(247, 247, 247);
		color: #999999;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: auto 20rpx;
	}

	.serch {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		margin-top: 5rpx;
		border-top: 2rpx solid rgb(248, 249, 251);
		background-color: white;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.rowf {
		display: flex;
		flex-direction: column;
		// align-items: center;
		// justify-content: center;
		background-color: white;
		padding-top: 20rpx;
		margin: 30rpx 0;

		.rowf_l {
			width: 90%;
			display: flex;
			flex-direction: row;
			flex: 1;
			margin: 0 auto
		}

		.rowf_txt {
			font-size: 34rpx;
			line-height: 75rpx;
			flex: 5;
			padding-left: 30rpx;
		}
	}

	.unik {
		display: flex;
		flex-direction: row-reverse;
		margin: 20rpx 0;
		padding-right: 30rpx;
	}

	.bwork ul li {
		margin: 20rpx 0;
		padding: 10rpx;
		background-color: white;
		border-radius: 8px;
	}

	.sright {
		color: #999999;
		font-size: 28rpx;
		flex: 2;
		display: flex;
		justify-content: right;
	}

	.texttwo {
		margin-right:20rpx;
		width: 150rpx;
		height: 40rpx;
		padding: 6rpx 10rpx;
		background-color: red;
		text-align: center;
		line-height: 40rpx;
		font-size: 28rpx;
		border-radius: 50px;
		background-color: white;
		border: 1px solid rgb(255, 161, 8);
		color: rgb(255, 161, 8);
	}

	.Hawork {
		// width: 90%;
		margin: 0rpx auto 30rpx;
		flex: 6;
		display: flex;
		flex-direction: column;
		position: relative;

		.Hawork_god {
			display: flex;
			flex-direction: row;
		}
	}

	.Hawork p {
		padding: 7rpx 5rpx;
		font-size: 28rpx;
		display: inline-block;
		flex: 5;
		margin-left: 50rpx;
	}

	.bwork {
		background-color: rgb(248, 249, 251);
		padding: 12px;
		border-radius: 8px;
	}

	.bwork ui {
		width: 95%;
		margin: 0 auto;
	}
</style>
